 
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
canvas {
background-color: #f3f3f3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
border: 1px solid #c3c3c3;
height: 100px;
margin: 6px 0 0 6px;
}
</style>

<form role="form" ng-submit="createFilm()">
  <fieldset ng-disabled="createFilmSuccess">
  <div class="form-group">
    <label for="title">Title:</label>
    <input type="text" class="form-control" id="title" ng-model="film.title" required>
  </div>
  <div class="form-group">
    <label for="description">Description:</label>
    <textarea rows="5"class="form-control" id="description" ng-model="film.description"></textarea>
  </div>
  <div class="form-group">
    <label for="streetDate">Street Date:</label>
    <input type="text"class="form-control" id="streetDate" ng-model="film.streetDate">
  </div>
  <div class="form-group">
      <label for="studio">Studio:</label>
      <select class="form-control" id="studio" ng-click="listStudios()" ng-model="film.studio" ng-options="s.name for s in studios track by s.name">
      </select>
  </div>
  <div class="form-group">
    <label for="description">Comment:</label>
    <textarea rows="5"class="form-control" id="comment" ng-model="film.comment"></textarea>
  </div>
  <div class="form-group">
    <label for="coverImage">Cover Image:</label><span ng-repeat="item in uploader.queue" ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></span>
    <div class="well my-drop-zone" nv-file-drop="" options="{ url: 'https://59.125.131.152/mymovies/Film.do?method=DoEditFilm', autoUpload: true }" nv-file-over="" uploader="uploader">
          Drag & Drop Here
    </div>
  </div>
<input type="file" nv-file-select="" uploader="uploader" />
 <table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
 <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
  </fieldset>

  <button type="submit" ng-hide="createFilmSuccess" class="btn btn-default">Submit</button>
  <a href="#/"><button ng-show="createFilmSuccess" class="btn btn-success">Back</button></a>
</form>
